<template>
  <div class="DiaryAreaHeader">
    <div class="left">
      <timerVue :data="diaryList[activeDiary]"></timerVue>
    </div>
    <div class="right">
      <el-button type="primary" v-if="!isModify" icon="el-icon-s-promotion" @click="saveDiary" :disabled="!isEdit"
        >保存</el-button
      >
      <el-button type="primary" v-else icon="el-icon-s-promotion" @click="modifyDiary" :disabled="!isEdit"
        >修改</el-button
      >
    </div>
  </div>
</template>

<script>
import timerVue from "./timer.vue";
import { mapState } from "vuex";
export default {
  components: { timerVue },
  data() {
    return { somecontent: "" };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapState(["diaryList", "activeDiary",'isEdit','isModify']),
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 用事件总线$bus对文本框的值跟按钮通信
    saveDiary() {
      this.$bus.$emit('saveData');
        this.$message({
          message: '恭喜你，成功添加一条日记',
          type: 'success'
        });
    },
    modifyDiary(){
       this.$bus.$emit('modifyData');
         this.$message({
          message: '恭喜你，成功修改一条日记',
          type: 'success'
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
 
  },
};
</script>
<style lang='css' scoped>
.DiaryAreaHeader {
  margin: 5px 10px;
  border: 1px solid black;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left {
  padding: 5px 10px;
}
.right {
  margin-right: 10px;
}
</style>